<template>
  <view class="container">
    <view class="form">
      <view class="form-item">
        <text class="label">所在城市:</text>
        <picker mode="selector" :range="cityList" @change="onCityChange" :value="cityIndex">
          <view class="input">{{ cityList[cityIndex] || '请选择城市' }}</view>
        </picker>
      </view>

      <view class="form-item">
        <text class="label">小区/大厦/学校:</text>
        <input
          class="input"
          placeholder="如杭师大合前校区"
          v-model="formData.department"
          placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="label">楼号-门牌号:</text>
        <input
          class="input"
          placeholder="A号楼B层"
          v-model="formData.houseNumber"
          placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="label">收货人:</text>
        <input
          class="input"
          placeholder="请填写收货人的姓名"
          v-model="formData.name"
          placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="label">联系电话:</text>
        <input
          class="input"
          placeholder="请填写收货手机号"
          v-model="formData.phone"
          placeholder-class="placeholder"
          type="number"
        />
      </view>
    </view>
    <view class="btn">
      <!-- <button class="cancel" @click="saveAddress">取消</button> -->
      <button class="save-btn" @click="saveAddress">保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        city: "",
        department: "",
        houseNumber: "",
        name: "",
        phone: "",
      },
      cityList: ["杭州市", "北京市", "上海市", "广州市", "深圳市","洛阳市"], // 城市列表
      cityIndex: 0, // 当前选择的城市索引
    };
  },
  methods: {
    onCityChange(e) {
      this.cityIndex = e.detail.value;
      this.formData.city = this.cityList[this.cityIndex];
    },
    saveAddress() {
      // 这里可以添加表单验证
      if (!this.formData.city) {
        uni.showToast({ 
            title: "请选择所在城市", 
            icon: "none" 
        });
        return;
      } else if (!this.formData.department) {
        uni.showToast({
            title: "请填写详细地址",
            icon: "none"
        });
        return;
      } else if (!this.formData.houseNumber) {
        uni.showToast({ 
            title: "请填写楼号-门牌号", 
            icon: "none" 
        });
        return;
      } else if (!this.formData.name) {
        uni.showToast({ 
            title: "请填写收货人姓名", 
            icon: "none" 
        });
        return;
      } else if (!this.formData.phone) {
        uni.showToast({ 
            title: "请填写联系电话", 
            icon: "none" 
        });
        return;
      } else if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
        uni.showToast({
          title: "手机号码格式不正确，请填写正确的手机号",
          icon: "none",
        });
        return;
      } else {
        uni.request({
          url: "http://localhost:3000/address",
          method: "POST",
          data: this.formData,
          success: (res) => {
            if (res.statusCode === 200 || res.statusCode === 201) {
              uni.showToast({ title: "地址保存成功" });
              setTimeout(() => {
                uni.navigateBack(); // 返回上一页
              }, 1500);
            } else {
              uni.showToast({ title: "保存失败，请重试", icon: "none" });
            }
          },
        });
      }

      // 保存逻辑，可以调用API或存储到本地
      //   console.log('保存的地址信息:', this.formData);
      //   uni.showToast({ title: '保存成功' });

      //   // 保存后返回上一页
      //   setTimeout(() => {
      //     uni.navigateBack();
      //   }, 1500);
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.title {
  font-size: 36px;
  font-weight: bold;
}

.form {
  background-color: #fff;
  border-radius: 10px;
  padding: 0 20px;
}

.form-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.form-item:last-child {
  border-bottom: none;
}

.label {
  /* width: 160px; */
  font-size: 20px;
  color: #333;
  margin-right: 10px;
}

.input {
  flex: 1;
  font-size: 20px;
}

.placeholder {
  color: #999;
  font-size: 17px;
}
.btn {
  display: flex;
}

.btn .cancel {
  margin-top: 50px;
  background-color: red;
  color: #fff;
  border-radius: 50px;
  width: 100px;
}
.save-btn {
  margin-top: 50px;
  background-color: #007aff;
  color: #fff;
  border-radius: 50px;
  width: 100px;
}
</style>    